<template>
    <div class="certification">

        <el-card v-loading="false">
            <div class="stepbox" :style="{height:autoHeight+'px'}">
                <div class="">
                    <el-steps class="m-c w270" :active="step" finish-status="success">
                        <el-step title="账户注册" />
                        <el-step title="提交成功" />
                    </el-steps>
                    <div class="p-t-50"></div>
                    <Step1 v-if="step == 0" @update-data="updateParentData"/>
                    <Step4 v-else />
                </div>
            </div>
        </el-card>
    </div>
</template>
<script setup lang="ts">
document.title = "注册";
import { ref } from 'vue'
import Step1 from '@/components/step1.vue'
import Step4 from '@/components/step4.vue'

import { adaptiveHeight } from '@/utils/func'
const autoHeight = ref(adaptiveHeight(90))

const step = ref(0)
const updateParentData = (newData:number) => {
    step.value = newData;
};
</script>
<style>
.stepbox {
    overflow-y: auto;
}
.w270 {
    width: 270px;
}
</style>